.theme-dark {
  // Local variables for reused colors

  //dark sidebar
  $darkest          : #141419;

  //dark body 
  $darker           : #1B1C21;

  //dark inputs
  $dark             : #27292E;

  //dark borders and button
  $medium           : #4A4B52;

  // dark disabled,
  $light            : #6C6C76;

  //dark secondary
  $lighter           : #B6B6C2;

  // dark main text
  $lightest         : #FFFFFF;

  $secondary        : $lighter;
  $disabled         : $medium;

  //Contrast colors
  $contrasted-dark  : $lightest !default;
  $contrasted-light : $darkest !default;

  // Colors that will have text- and bg- helper classes created
  // value can also be map of default, default-text, hover-text, hover-bg, active-text,  active-bg)
  @include color-variables((
    default:    $dark,
    muted:      $disabled,
    link:       (
      default-text: $link,
      hover-text:   darken($link, 30%),
      active-text:  lighten($link, 25%),
      default:      transparent,
      hover-bg:     transparent,
      active-bg:    transparent,
    ),
    primary:    $primary,
    secondary:  $secondary,
  ));

  --default-text               : #{$light};




  --body-bg                    : #{$darker};
  --body-text                  : #{$lightest};
  --scrollbar-thumb            : #{$medium};
  --scrollbar-thumb-dropdown   : #{$darker};

  --nav-bg                     : #{$darkest};
  --nav-active                 : var(--primary);

  --disabled-bg                : #{$disabled};
  --box-bg                     : #{$darkest};
  --border                     : #{$medium};

  --accent-btn                 : #{rgba($primary, 0.2)};
  --overlay-bg                 : #{rgba($darkest, 0.75)};
  --shadow                     : #{rgba($darkest, 0.75)};

  --dropdown-bg                : #{$dark};
  --dropdown-border            : var(--border);
  --dropdown-divider           : #{$light};
  --dropdown-text              : #{$link};
  --dropdown-hover-text        : #{$lightest};
  --dropdown-hover-bg          : #{$selected};
  --dropdown-disabled-bg       : #{$disabled};

  --input-text                 : #{$lightest};
  --input-label                : #{$lighter};
  --input-placeholder          : #{$disabled};
  --input-border               : var(--border);
  --input-bg                   : #{$dark};
  --input-hover-bg             : var(--body-bg);
  --input-focus-bg             : #{$darkest};
  --input-disabled-text        : #{$medium};
  --input-disabled-bg          : #{$dark};
  --input-disabled-border      : #{$disabled};
  --input-disabled-placeholder : darken($disabled, 10%);
  --input-addon-bg             : #{$darker};


  --progress-bg                : #{$medium};
  --progress-divider           : #{$lightest};

  --sortable-table-header-bg   : transparent;
  --sortable-table-accent-bg   : #{$darkest};
  --sortable-table-accent-alt  : #{$darker};
  --sortable-table-top-divider : var(--border);
  --sortable-table-selected-bg : #{$selected};

  --popover-bg                 : var(--body-bg);
  --popover-border             : var(--border);
  --popover-text               : var(--body-text);
  --tooltip-bg                 : #{$primary};
  --tooltip-border             : var(--border);
  --tooltip-text               : var(--body-text);

  --tabbed-border              : #{$medium};
  --tabbed-container-bg        : #{$darkest};

  --wm-tabs-bg                 : #{$darker};
  --wm-tab-bg                  : #{$darkest};
  --wm-closer-hover-bg         : #{$medium};
  --wm-tab-active-bg           : #{$darker};
  --wm-title-bg                : #{$darkest};
  --wm-title-border            : #{$medium};
  --wm-body-bg                 : #{$darkest};
  --wm-border                  : black;

  --terminal-bg                : var(--wm-body-bg);
  --terminal-cursor            : var(--warning);
  --terminal-text              : var(--body-text);

  --logs-bg                    : var(--wm-body-bg);
  --logs-highlight             : var(--wm-body-bg);
  --logs-highlight-bg          : var(--warning);
  --logs-text                  : var(--body-text);
}

